<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/advertisingList.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>广告列表</title>
</head>
<body style="background:#f1f5f8;">
    <div class="box">
        <!-- 表单 -->
        <div class="header">
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">编号</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">广告名称</label>
                    <input class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputName2">所属商家</label>
                    <input class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">品牌名称</label>
                    <input class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputName2">销售人员</label>
                    <input type="text" class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail2">创建时间</label>
                    <input type="date" class="form-control">
                </div>
                <div class="form-group">
                    <label for="exampleInputName2">至</label>
                    <input type="date" class="form-control">
                </div>
                <div class="form-group">
                <label for="exampleInputName2">状态</label>
                    <select name="" id="">
                        <option value="">执行中</option>
                        <option value="">等待中</option>
                        <option value="">已撤销</option>
                        <option value="">已结束</option>
                    </select>
                </div>
                <!-- 重置 检索按钮 -->
                <div class="oBtn">
                    <input type="reset" value="重置">
                    <input type="submit" value="检索">
                </div>
                
            </form>
        </div>
        <!-- 表格 -->
        <div class="tableList">
            <div class="controlBtn">
                <div class="oRight">
                    <span>当前列表总数88</span>
                </div>
            </div>
            <!-- 表格 -->
            <table class="table table-bordered">
                <!-- 表头 -->
                <thead>
                    <tr class="warning">
                        <th>编号</th>
                        <th>广告名称</th>
                        <th>品牌名称</th>
                        <th>覆盖设备数量</th>
                        <th>建立时间</th>
                        <th>起止时间</th>
                        <th>状态</th>
                        <th style="width:180px">编辑</th>
                    </tr>
                </thead>
                <!-- 表身 -->
                <tbody>
                    <tr>
                        <td>12243</td>
                        <td>有意 u</td>
                        <td>有意*</td>
                        <td>有意**</td>
                        <td有意td>
                        <td有意td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>
                            <a href="#" data-toggle="modal" data-target="#myModal_two">查看</a>
                            <a href="#" data-toggle="modal" data-target="#myModal_three">编辑</a>
                            <a href="#" data-toggle="modal" data-target="#myModal">撤销广告</a>
                        </td>
                    </tr>
                    <tr>
                        <td>12243</td>
                        <td>有意 u</td>
                        <td>有意*</td>
                        <td>有意**</td>
                        <td有意td>
                        <td有意td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>
                            <a href="#">查看</a>
                            <a href="#">编辑</a>
                            <a href="#"data-toggle="modal" data-target="#myModal">撤销广告</a>
                        </td>
                    </tr>
                    <tr>
                        <td>12243</td>
                        <td>有意 u</td>
                        <td>有意*</td>
                        <td>有意**</td>
                        <td有意td>
                        <td有意td>
                        <td>******</td>
                        <td>******</td>
                        <td>******</td>
                        <td>
                            <a href="#">查看</a>
                            <a href="#">编辑</a>
                            <a href="#"data-toggle="modal" data-target="#myModal">撤销广告</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页-->
        <div value="1 0" style="width:0"></div>
        <div id="page" class="page_div"></div>
    </div>

    <!-- 弹出框 是否撤销广告 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">移除元素</h4>
            </div>
            <div class="modal-body">
                <h4>是否将该广告移除</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框2 查看详情 -->
    <div class="modal fade" id="myModal_two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width:800px" role="document">
            <div class="modal-content" style="width:800px">
            <div class="modal-header"  style="width:800px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">查看详情</h4>
            </div>
            <div class="modal-body" style="width:800px">
                <div style="width:700px;height:25px;margin:0 auto;background: #eee;"></div>
                <div style="width:700px;margin:0 auto;border:1px solid #eee;">
                    <div style="width:700px;margin:0 auto;">
                        <dt class="dl_2 h40">
                            <font>广告名称:</font>
                            <span>**********</span>
                        </dt>
                        <dt class="h40">
                            <font>类型:</font>
                            <span>20天</span>
                        </dt>
                        <dt class="h40">
                            <font>所有商家:</font>
                            <span>*****</span>
                        </dt>
                        <dt class="h40">
                            <font>品牌名称:</font>
                            <span>*****</span>
                        </dt>
                        <dt class="h40">
                            <font>销售人员:</font>
                            <span>5s</span>
                        </dt>
                        <dt class="dl_2 h40">
                            <font>坐标:</font>
                            <span>**********</span>
                        </dt>
                    </div>
                    <!-- 图片 -->
                    <div class="oImg">
                        <p>图片</p>
                        <div><img src="./img/20180604-03.png" alt=""></div>
                    </div>
                    <!-- 图片视频预览 -->
                    <div class="oVideo">
                        <p>广告内容</p>
                        <div><img src="./img/20180604-01.png" alt=""></div>
                        <!-- <video src=""></video> -->
                    </div>
                    <!-- 切换时间 -->
                    <div class="oTime">
                        <label for="">切换时间</label>
                        <select>
                            <option value="">自定义</option>
                            <option value="">5</option>
                            <option value="">8</option>
                        </select>
                        <input type="text" placeholder="请填写切换时间秒">
                        <label for="">秒</label>
                    </div>
                    <!-- 广告底部图片 -->
                    <div class="oImg">
                        <p>广告底部图片</p>
                        <div><img src="./img/20180604-03.png" alt=""></div>
                    </div>
                    <!-- 投放时间段 -->
                    <div class="aTime">
                        <span>投放时间段</span>
                        <span>20150602-2018-0209</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal_four">查看投放小区</button>
            </div>
            </div>
        </div>
    </div>

    <!-- 弹出框3 编辑 -->
    <div class="modal fade" id="myModal_three" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" style="width:800px" role="document">
                <div class="modal-content" style="width:800px">
                <div class="modal-header"  style="width:800px">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body" style="width:800px">
                    <div style="width:700px;height:25px;margin:0 auto;background: #eee;"></div>
                    <div style="width:700px;margin:0 auto;border:1px solid #eee;">
                        <div style="width:700px;margin:0 auto;margin-left:15px">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label width80">广告名称</label>
                                    <div class="col-sm-10">
                                    <input class="form-control w300">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label width80">所属名称</label>
                                    <div class="col-sm-10">
                                    <input class="form-control w300">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label width80">品牌名称</label>
                                    <div class="col-sm-10">
                                    <input class="form-control w300">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-2 control-label width80">销售人员</label>
                                    <div class="col-sm-10">
                                    <input class="form-control w300">
                                    </div>
                                </div>
                            </form>
                            <!-- 广告背景图片 -->
                            <div class="backImg">
                                <span>广告背景图片</span>
                                <div class="backImg_right">
                                    <button>浏览</button>
                                    <input type="file">
                                    <em>图片格式不得超过10M，仅支持PNG.JPG.GIF格式</em>
                                </div>
                            </div>
                            <!-- 预览图片 -->
                            <div class="yulan">预览图片</div>
                        </div>
                        <div style="width:100px;height:5px"></div>
                        <div class="advert">
                            <label>广告类型</label>
                            <select>
                                <option value="">haha</option>
                                <option value="">hah</option>
                            </select>
                        </div>
                        <div class="kao" style="overflow:hidden">
                            <!-- 广告内容 -->
                            <label style="float:left">广告内容</label>
                            <input type="file" style="float:left">
                        </div>
                        <div class="append_remove">
                            <div class="remove"style="text-align:right">
                                <div >X</div>
                                <p style="font-size:20px;text-align: center;line-height: 90px">点击预览</p>
                            </div>
                            <div class="append">+</div>
                        </div>
                        <div style="width:100px;height:5px"></div>
                        <!-- 间距 -->
                        <div class="jianju">
                            <label>顶距</label>
                            <input type="text">
                            <label>右距</label>
                            <input type="text">
                        </div>
                        <div style="width:100px;height:5px"></div>
                        <!-- 切换时间 -->
                        <div class="oTime">
                            <label for="">切换时间</label>
                            <select>
                                <option value="">自定义</option>
                                <option value="">5</option>
                                <option value="">8</option>
                            </select>
                            <input type="text" placeholder="请填写切换时间秒">
                            <label for="">秒</label>
                        </div>
                        <div style="width:100px;height:5px"></div>
                        <!-- 广告播放时间描述 -->
                        <div class="miao">
                            <label>广告播放时间秒数</label>
                            <select>
                                <option value="">1</option>
                                <option value="">2</option>
                            </select>
                        </div>
                        <div style="width:100px;height:5px"></div>
                        <!-- 投放起止时间段 -->
                        <div class="aTime" style="font-size:15px">
                            <span>投放时间段</span>
                            <span>20150602-2018-0209</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
                </div>
            </div>
    </div>

    <!--弹出框4 查看投放小区 -->
    <div class="modal fade" id="myModal_four" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width:800px">
            <div class="modal-content" style="width:800px">
            <div class="modal-header" style="width:800px">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">查看投放小区</h4>
            </div>
            <div class="modal-body" style="width:750px;margin:0 auto">
                <form class="form-inline" style="width:700px">
                    <div class="form-group">
                        <label for="exampleInputName2" class="ow70">小区名称</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2" class="ow70">详细地址</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2" class="ow70">维护人员</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="">
                        <div class="form-group">
                            <label for="exampleInputEmail2" class="ow70">省/直辖市</label>
                            <select>
                                <option value="">上海</option>
                                <option value="">江西</option>
                            </select>
                        </div>
                        <div class="form-group">
                        <label for="exampleInputEmail2">市</label>
                        <select>
                            <option value="">上海</option>
                            <option value="">江西</option>
                        </select>
                        </div>
                        <div class="form-group">
                        <label for="exampleInputEmail2">县/区</label>
                        <select>
                            <option value="">上海</option>
                            <option value="">江西</option>
                        </select>
                        </div>
                        <div class="form-group">
                        <label for="exampleInputEmail2">所属商圈</label>
                        <select>
                            <option value="">上海</option>
                            <option value="">江西</option>
                        </select>
                        </div>
                    </div>
                </form>
                <div class="tableList">
                    <div class="controlBtn">
                        <div class="oRight">
                            <span>当前列表总数88</span>
                        </div>
                    </div>
                    <!-- 表格 -->
                    <table class="table table-bordered">
                        <!-- 表头 -->
                        <thead>
                            <tr class="warning">
                                <th>小区编号</th>
                                <th>小区名称</th>
                                <th>详细地址</th>
                                <th>所属区域</th>
                                <th>物业公司</th>
                                <th>维护人员</th>
                                <th>设备数</th>
                            </tr>
                        </thead>
                        <!-- 表身 -->
                        <tbody>
                            <tr>
                                <td>12243</td>
                                <td>*****</td>
                                <td>******</td>
                                <td>******</td>
                                <td>******</td>
                                <td>******</td>
                                <td>******</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">重置</button>
                <button type="button" class="btn btn-primary">检索</button>
            </div>
            </div>
        </div>
    </div>
    
    <script src="./js/jquery-3.2.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/paging.js"></script>
    <script src="./js/pag.js"></script>
</body>
</html>